<!--
    一.获取元素
        $("选择器")
        或
        $(js对象)



    二.绑定事件
        $("选择器").事件(function(){})

        let event = function(){}
        $("选择器").on("事件", event)       //  addEventListener

        $("选择器").off("事件", event)      //  removeEventListener

        $("选择器").off("事件")             //  removeEventListener移除所有该标签的该事件



    三.修改内容,属性，样式


        内容：
        $("选择器").text()      //  innerText       返回字符串
        $("选择器").html()      //  innerHTML


        $("选择器").text(具体内容)
        $("选择器").html(具体内容)


        $("选择器").text(function(index, text){
            console.log(index, text);       //  获取原内容

            return index + text             //  修改原内容   为   新内容
        })
        $("选择器").html(function(index, text){
            console.log(index, text);       //  获取原内容

            return index + text             //  修改原内容   为   新内容
        })



        特殊：
            输入框input
            $("选择器").事件(function(index, val){
            $("input").val()        //  只能用val取值，     text或html不能取输入框input
            return 新内容           //  修改原内容为新内容
            })




        属性：
            $("选择器").attr("属性名")       //  获取对应目标的对应属性（只获取第一个找到的目标的）


            $("选择器").attr("原属性名"， 值)       //  修改属性


            $("选择器").attr("目标属性", fuction(index, value){     //  没有目标属性则创建
                return 新内容                       //  修改属性（覆盖原内容）
            })


            $("选择器").removeAttr("属性名")        //  删除属性



            $("选择器").hasClass("值")          //  class的值是否为值

            $("选择器").addClass("值")       //  给class赋值


            $("选择器").removeClass("值")      //  删除class的值

            .toggleClass("值")      //  class有值则删去，无值则赋值





        样式：
            $("选择器").css("样式名")       //  获取样式


            $("选择器").css("目标样式名", "值")     //  修改样式


            $("选择器").css("目标样式名", function(index, value){   //  修改样式
                return  新值
            })


            $("选择器").css({       //  修改样式
            k1:V1,
            k2:v2,
            k3:v3,
            .....
            })

    四.相关元素
        获取：
            p.children()          //  所有子元素      （jquery对象类型，可以变量）
            p.children()[3]      //  指定子元素      （jquery对象类型，可以变量）
            p.first()           //  第一个子元素
            p.last()            //  最后一个子元素



            p.parent()              //  直接父元素
            p.parents()             //  所有间接父元素
            (p.parentsUntil("同级元素")       //  所有间接父元素直到某个父元素（不包含该父元素）


            p.prev()             //  前一个同级元素
            p.prevAll()         //  所有前面的同级元素
            p.prevUntil("同级元素")     //  所有前面的同级元素直到某个同级元素（不包含该同级元素）


            p.next()          //  后一个同级元素
            p.nextAll()       //  所有后面的同级元素
            p.nextUntil("同级元素")     //  所有后面的同级元素直到某个同级元素（不包含该同级元素）


            span3.siblings()      //  出自身外的所有同级元素


        创建：
        插入：
            目标.append(内容)             //  向目标中插入内容

            内容.appendTo(目标)        //  将内容插入目标

            内容.insertBefore(目标)      //  将p插入到div之前
            内容.insertAfter(目标)      //  将p插入到div之后




        删除：

        目标元素.remove()       //  删除目标元素


        目标元素.empty()        //  清空目标元素下的所有元素


-->







<!-- 
    .eq(index)      //  索引位置的单个元素
-->






<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery常用操作</title>
    <script src="/JS/jquery-3.7.1.js"></script>
</head>

<body>





    <!-- 
    <span>测试1</span>
    <span>测试2</span>
    -->
    <script>

        // let event1 = function (e) { console.log(e) }    //  绑定和移除都要一致使用event，不能一个是function(){}

        // let event2 = function (e) { console.log($(e)) }    //  绑定和移除都要一致使用event，不能一个是function(){}

        // $("span").on("click", event1)

        // $("span").on("click", event2)

        // $("span").off("click", event1)

        // $("span").off("click", event2)

        // $("span").off("click")      //  移除所有该标签的所有该事件

    </script>





    <!-- 
    <span>测试1</span>
    <span>测试2</span>
    <span><a href="">hello</a></span> 
    -->
    <script>

        // // $("span").eq(2).html('<a href="">hello-------span888</a>')
        // // console.log($("span").eq(2).text());        //  hello-------span888


        // $("span").text(function (index, text) {

        //     console.log(index, text);       //  获取原内容

        //     return index + text     //  修改原内容   为   新内容
        // })
    </script>




    <!-- 
    <span title="悬停1">测试1</span>
    <span title="悬停2">测试2</span>
    <span title="悬停3">测试3</span>
    <span title="悬停4">测试4</span> 
    -->
    <script>

        // console.log($("span").attr("title"));       //  获取对应目标的对应属性（只获取第一个找到的目标的）

        // $("span").attr("title", "span")      //  修改属性内容为新属性

        // $("span").attr("title", function (index, value) {
        //     console.log(index, value);
        //     return index + value
        // })

        // $("span").removeAttr("title")



        // let span = $("span")
        // span.click(function () {
        //     if (span.hasClass("show")) {     //  class的值
        //         span.removeClass("show")     //  删除class的值
        //     }
        //     else {
        //         span.addClass("show")        //  增添class的值
        //     }
        // })


        // let span = $("span")
        // span.click(function () {
        //     span.toggleClass("show")        //  .toggleClass("class的值")
        // })


    </script>





    <!-- 
    <span title="悬停1">测试1</span>
    <span title="悬停2">测试2</span>
    <span title="悬停3">测试3</span>
    <span title="悬停4">测试4</span>
    -->
    <script>

        // let span = $("span")
        // console.log(span.css("color"));     //  rgb(0, 0, 0)


        // span.css("color", "white");    //  修改样式


        // span.css("background-color", function (index, value) {
        //     console.log(index, value);      //  索引  样式的值
        //     return value = "lightpink"

        // })


        // span.css({
        //     "font-size": "48px",
        //     "border": "10px solid lightblue"
        // })

    </script>


    <!-- <div></div>
    <div>
        <a href="">理塘小马</a>
        <p>
            <a href="">小黑子</a>
            <span id="span1" title="悬停1">span1</span>
            <span id="span2" title="悬停2">span2</span>
            <span id="span3" title="悬停3">span3</span>
            <span id="span4" title="悬停4">span4</span>
            <a href="">妈妈生的</a>
        </p>
        <a href="">芝士雪豹</a>
    </div>
    <div></div> -->
    <script>
        // let p = $("p")
        // console.log(p.children());          //  所有子元素      （jquery对象类型，可以变量）
        // console.log(p.children()[3]);      //  指定子元素      （jquery对象类型，可以变量）
        // console.log(p.first());     //  第一个子元素
        // console.log(p.last());      //  最后一个子元素



        // console.log(p.parent());        //  直接父元素
        // console.log(p.parents());       //  所有间接父元素
        // console.log(p.parentsUntil("body"));       //  所有间接父元素直到某个父元素（不包含该父元素）


        // console.log(p.prev());          //  前一个同级元素
        // console.log(p.prevAll());       //  所有前面的同级元素
        // console.log(p.prevUntil(a));     //  所有前面的同级元素直到某个同级元素（不包含该同级元素）


        // console.log(p.next());          //  后一个同级元素
        // console.log(p.nextAll());       //  所有后面的同级元素
        // console.log(p.nextUntil(a));     //  所有后面的同级元素直到某个同级元素（不包含该同级元素）


        // let span3 = $("#span3")
        // console.log(span3.siblings());      //  出自身外的所有同级元素

    </script>





    <div>
    </div>
    <script>
        // let p = $("div").append("<p>妈妈生的</p>")       //  向目标中插入内容
        // console.log(p);      //  div

        // let p = $("<p>妈妈生的</p>").appendTo("div")        //  将内容插入目标
        // console.log(p);     //  p

        // $("<p>妈妈生的</p>").insertBefore("div")      //  将p插入到div之前

        // $("<p>妈妈生的</p>").insertAfter("div")      //  将p插入到div之后

    </script>



</body>

</html>